<script setup>
import { ref } from 'vue'
import { artGetBlogDetailService } from '@/api/web/article'
import { useRoute } from 'vue-router'
import { dayjs } from 'element-plus'
const loading = ref(false)
const detailData = ref({})
const route = useRoute()

const getBlogDetail = async () => {
  loading.value = true
  const id = route.params.id
  const res = await artGetBlogDetailService(id)
  detailData.value = res.data
  loading.value = false
}

getBlogDetail()

defineOptions({
  name: 'DetailPage'
})
</script>
<template>
  <div class="detail-page">
    <el-row>
      <el-col :span="4"> </el-col>
      <el-col :span="16">
        <div class="common-layout" v-loading="loading">
          <el-container style="min-height: 665px">
            <el-header height="200px">
              <h2
                style="
                  text-align: center;
                  height: 30px;
                  text-overflow: ellipsis;
                  overflow: hidden;
                "
              >
                {{ detailData.title }}
              </h2>
              <el-row>
                <el-col :span="18">
                  <p>分类：{{ detailData.catName }}</p>

                  <p>
                    标签：<el-tag
                      v-for="(item, index) in detailData.tags"
                      :key="index"
                      effect="dark"
                      type="primary"
                      style="margin-right: 10px"
                      :color="item.color"
                      >{{ item.tagName }}</el-tag
                    >
                  </p>
                </el-col>
                <el-col :span="6" style="text-align: end">
                  <p>作者：{{ detailData.createName }}</p>
                  <p>
                    时间：{{
                      dayjs(detailData.createTime).format('YYYY-MM-DD')
                    }}
                  </p>
                </el-col>
              </el-row>
              <hr />
            </el-header>
            <el-main>
              <v-md-preview :text="detailData.originContent"></v-md-preview>
            </el-main>
          </el-container>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.detail-page {
  background: url('../../assets/imgs/bg.png') repeat;
}
.common-layout {
  background-color: #fff;
}
</style>
